<template>
  <div>
    <input type="text" v-model="data">
    <button @click="add">添加</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ index + 1 }} -- {{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';

// const list = reactive(['html', 'json', 'css', 'js', 'vue'])
const list = ref(['html', 'json', 'css', 'js', 'vue'])
const data = ref('')
// const add = () => {
//   list.value.push('react')
// }



const add = () => {
  //获取用户在input框中输入的内容，再 push 进list
  list.value.push(data)
}
</script>

<style lang="css" scoped>

</style>